<template>
	<view class="container">
		<view class="header">
			<view class="title">环保社区</view>
			<view class="subtitle">与环保达人交流分享</view>
		</view>
		
		<view class="content">
			<view class="section">
				<view class="section-title">热门话题</view>
				<view class="topic-list">
					<view class="topic-item" v-for="(topic, index) in topics" :key="index">
						<view class="topic-avatar">👤</view>
						<view class="topic-info">
							<view class="topic-title">{{ topic.title }}</view>
							<view class="topic-desc">{{ topic.description }}</view>
							<view class="topic-meta">
								<text class="author">{{ topic.author }}</text>
								<text class="time">{{ topic.time }}</text>
								<text class="likes">👍 {{ topic.likes }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			topics: [
				{
					title: '如何在家里进行垃圾分类？',
					description: '分享一些实用的垃圾分类小技巧，让环保变得简单易行...',
					author: '环保达人',
					time: '2小时前',
					likes: 128
				},
				{
					title: '自制环保清洁剂的方法',
					description: '用天然材料制作清洁剂，既环保又省钱...',
					author: '绿色生活',
					time: '5小时前',
					likes: 89
				},
				{
					title: '周末环保活动召集',
					description: '本周末组织社区环保活动，欢迎参与...',
					author: '社区管理员',
					time: '1天前',
					likes: 256
				}
			]
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background-color: #f5f5f5;
}

.header {
	background: linear-gradient(135deg, #4CAF50, #8BC34A);
	padding: 60rpx 40rpx 40rpx;
	color: white;
	
	.title {
		font-size: 48rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}
	
	.subtitle {
		font-size: 28rpx;
		opacity: 0.9;
	}
}

.content {
	padding: 30rpx 40rpx;
}

.section {
	.section-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
	}
	
	.topic-list {
		.topic-item {
			background: white;
			border-radius: 16rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;
			display: flex;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
			
			.topic-avatar {
				font-size: 48rpx;
				margin-right: 20rpx;
			}
			
			.topic-info {
				flex: 1;
				
				.topic-title {
					font-size: 30rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 10rpx;
				}
				
				.topic-desc {
					font-size: 26rpx;
					color: #666;
					margin-bottom: 15rpx;
					line-height: 1.5;
				}
				
				.topic-meta {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #999;
					
					.author {
						margin-right: 20rpx;
					}
					
					.time {
						margin-right: 20rpx;
					}
					
					.likes {
						color: #4CAF50;
					}
				}
			}
		}
	}
}
</style> 